/* Base Application Styles */
body {
  color: #fff;
  background: #222;
}

/*
.index img {
  margin: 40px auto;
  border-radius: 4px;
  background: #fff;
  display: block;
}

.index .notice {
  margin: 20px auto;
  padding: 15px 0;
  text-align: center;
  border: 1px solid #000;
  border-width: 1px 0;
  background: #666;
}
*/

/* stage - start*/
.stage{
  position: relative;
  width: 100%;
  height:680px;
  background: #ddd;
}
/* stage - end*/

/* image - start*/
.img-sec{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #ddd;

  perspective: 1800px;

  @at-root {
    .img-figure{
      position: absolute;
      width: 320px;
      height: 360px;
      margin: 0;
      padding: 40px;

      background-color: #fff;
      box-sizing: border-box;
      transform-style: preserve-3d;
      transition: transform .6s ease-in-out, left .6s ease-in-out, top .6s ease-in-out;
      cursor: pointer;
      transform-origin: 0 50% 0;

      &.is-inverse {
        transform: translate(320px) rotateY(180deg);
      }
    }

    figcaption{
      text-align: center;
      .img-title{
        margin: 20px 0 0 0;
        color: #a7a0a2;
        font-size: 16px;
      }

      .img-back{
        position: absolute;
        left: 0;
        top:0;

        width: 100%;
        height: 100%;
        padding: 50px 40px;
        box-sizing: border-box;
        text-align: center;
        transform: rotateY(180deg) translateZ(1px);
        backface-visibility: hidden;
        background: #fff;
        color: #a7a0a2;
      }
    }
  }
}
/* image - end*/


/* controller - start*/
.controller-nav{
  position: absolute;
  left: 0;
  bottom: 30px;
  width: 100%;
  z-index: 101;
  text-align: center;
}
/* controller - end*/

